import React, { Component } from "react"
import { withRouter } from "react-router"
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/legendScroll';
import 'echarts/lib/component/dataZoom';
import 'echarts/lib/component/dataZoomInside';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/chart/custom';
import styles from './carDetail.less'
import Header from '@/components/header'
import DatePicker from '@/components/datePicker'
import { equipOneDetail, equipOneChart, equipOneWorkState, equipOneOil } from '@/services'
import { formatDate, formatFullDate, getChartColor } from '@/utils'
import Statistics from '@/components/statistics'
import Time from '@/components/time'
import { formatStatus, formatColor, getQueryString, renderItem, formatTime } from '@/utils/protarit'

class CarDetail extends Component {

  constructor(props){
    super(props);
    this.times = {
      beginDate: (this.props.location.state && this.props.location.state.worktime) ? this.props.location.state.worktime.beginDate : formatDate(new Date()), 
      endDate: (this.props.location.state && this.props.location.state.worktime) ? this.props.location.state.worktime.endDate : formatDate(new Date())
    };
    this.state = {
      statistics: {},
      pieData: {},
    }
    this.totalTime = 0;
    this.totalOil = 0;
    this.equipCode = getQueryString('equipCode');
    this.token = getQueryString('token');
    this.source = getQueryString('source');
  }

  componentDidMount(){
    this.handleChangeTab(this.times)
    this.mql = window.matchMedia('(orientation: portrait)');
    
    // 监听屏幕模式变化
    this.mql.addListener(this.onMatchMediaChange);
    this.renderChart()
  }

  componentWillUnmount() {
    this.mql.removeListener(this.onMatchMediaChange);
  }

  onMatchMediaChange = (mql) => {
    this.chart.resize();
    this.pie.resize();
  }

  handleChangeTab = async (times) => {
    try {
      this.times = times;
      const data = await equipOneDetail({ equipCode: this.equipCode , ...this.times, token: this.token, source: this.source });
      
      if(data.code==200){
        this.setState({ statistics: data.data })
        echarts.dispose(document.getElementById('chart'));
        this.renderChart();
        this.renderPie()
      }
    } catch (error) {
      console.log(error)
    }
  }

  renderPie = async () => {
    try {
      const data = await equipOneOil({ equipCode: this.equipCode , ...this.times, token: this.token, source: this.source });
      if(data.code===200){
        const timeData = [
          { name: '行驶', value: (data.data.time.driveTime/3600).toFixed(2), itemStyle: { color: getChartColor['行驶'] } },
          { name: '泵送', value: (data.data.time.pumpTime/3600).toFixed(2), itemStyle: { color: getChartColor['泵送'] } },
          { name: '转场', value: (data.data.time.switchTime/3600).toFixed(2), itemStyle: { color: getChartColor['转场'] } },
          { name: '驻车', value: (data.data.time.parkTime/3600).toFixed(2), itemStyle: { color: getChartColor['驻车'] } },
          { name: '待料', value: (data.data.time.awaitTime/3600).toFixed(2), itemStyle: { color: getChartColor['待料'] } },
        ]
        this.totalTime = ((data.data.time.driveTime+data.data.time.pumpTime+data.data.time.switchTime+data.data.time.parkTime+data.data.time.awaitTime)/3600).toFixed(1);
        const oilData = [
          { name: '行驶', value: data.data.oil.driveOil, itemStyle: { color: getChartColor['行驶'] } },
          { name: '泵送', value: data.data.oil.pumpOil, itemStyle: { color: getChartColor['泵送'] } },
          { name: '转场', value: data.data.oil.switchOil, itemStyle: { color: getChartColor['转场'] } },
          { name: '驻车', value: data.data.oil.parkOil, itemStyle: { color: getChartColor['驻车'] } },
          { name: '待料', value: data.data.oil.awaitOil, itemStyle: { color: getChartColor['待料'] } },
        ]
        this.totalOil = data.data.oil.driveOil + data.data.oil.pumpOil + data.data.oil.switchOil + data.data.oil.parkOil + data.data.oil.awaitOil;
        this.setState({ pieData: data.data })
        this.pie = echarts.init(document.getElementById('pie'));
        this.pie.setOption({
          grid: {
            top: 0,
            bottom: 0,
            left: 20,
            right: 20,
          },
          tooltip: {
            trigger: 'item',
          },
          title : {
            text: '时间/油耗分布图',
            show: true,
            textStyle: {
              color: 'red',
              fontSize: 16,
            }
          },
          series: [
            {
              name: '时间',
              type: 'pie',
              radius : [0, 76],
              center: ['50%', '33%'],
              data: timeData,
              avoidLabelOverlap: true,
              minShowLabelAngle: 20,
              tooltip: {
                formatter: "{b}: {c}H ({d}%)"
              },
              label: { 
                show: false
                // formatter: '{c}H\n{b}',
                // color: '#000',
                // fontSize: 12,
                // position: 'inside',
                // align: 'left'
              },
            },
            {
              name: '油耗',
              type: 'pie',
              radius : [91, 115],
              center: ['50%', '33%'],
              data: oilData,
              label: { 
                formatter: '{d}%',
                color: '#000',
                fontSize: 16,
                align: 'left'
              },
              tooltip: {
                trigger: 'item',
                formatter: "{b}: {c}L ({d}%)"
              },
              labelLine: {
                // length: 3
              }
            }
          ]
        })
      }
    } catch (error) {
      console.log(error)
    }
  }

  // 设备工作画像
  renderChart = async () => {
    try {
      const { data } = await equipOneChart({ equipCode: this.equipCode , ...this.times, token: this.token, source: this.source });
      if(data.dataList.length>0){
        this.devportrait.style.display = 'block';
        this.nodata.style.display = 'none';
        data.stateList ? this.miniChart(data) : (this.datePicker.getActive() == 2) ? this.monthChart(data) : this.dayChart(data)
      }else{
        this.devportrait.style.display = 'none';
        this.nodata.style.display = 'block';
      }
    } catch (error) {
      console.log(error)
    }
  }

  // 设备工作画像精确到分
  miniChart = (data) => {
    this.chart = echarts.init(document.getElementById('chart'));
    // 用透明的数据撑起24小时时间区间
    const anchorLine = [
      [`${this.times.beginDate} 00:00:00`, 0],
      [`${this.times.beginDate} 24:00:00`, 0],
    ];
    this.seriesData = [];
    this.oilData = [];
    this.quantityData = [];
    this.mileData = []
    data.stateList.map(item=>{
      this.seriesData.push({
        name: '状态',
        value: [0, item.startTime, item.endTime, item.equipState],
        itemStyle: {
          normal: {
            color: formatColor(item.equipState)
          }
        }
      })
    })
    data.dataList.map(item=>{
      this.oilData.push([item.time, item.oil]);
      this.quantityData.push([item.time, item.quantity])
      this.mileData.push([item.time, item.mileage])
    })
    this.chart.setOption({
      axisPointer: {
        link: [
          {
            xAxisIndex: [0, 1],
          },
        ],
      },
      grid: [{
        top: 90,
        left: 40,
        right: 40,
        bottom: '21%',
      },{
        top: '80%',
        left: 40,
        right: 40,
        bottom: 35
      }],
      xAxis: [{
        type: 'time',
        gridIndex: 0,
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false,
        }
      },{
        gridIndex: 1,
        type: 'time',
        splitNumber: 6,
        axisLabel: {
          formatter: (date)=>{
            let time = (new Date(date)).getHours();
            return `${time<10?0:''}${time}:00`
          }
        },
        splitLine: {
          show: false,
        },
      }],
      yAxis: [{
        name: '千米',
        type: 'value',
        splitLine: {
          show: false
        },
        splitNumber: 5,
        axisLabel: {
          show: true,
          formatter: (value)=>{ 
            return (value/1000).toFixed(1)
          },
        }
      },{
        name: '方｜L',
        type: 'value',
        splitLine: {
          show: false
        },
        splitNumber: 5,
        axisLabel: {
          show: true,
          formatter: '{value}'
        }
      },{
        gridIndex: 1,
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },{
        gridIndex: 1,
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      }],
      tooltip: {
        trigger: 'axis',
        triggerOn: 'click',
        formatter: (params) => {
          if(params.length<4){
            return ``
          }
          if(params[0].componentIndex===0){
            let time = formatFullDate(params[0].axisValue);
            return `
              ${(time.split(' '))[1]}<br />
              状态：${formatStatus(params[3].value[3])} ${formatTime((params[3].value[2]-params[3].value[1])/1000)}<br />
              油耗(升)：${params[2].data[1]}<br />
              泵送方量(方)：${params[1].data[1]}<br />
              行驶里程(米)：${params[0].data[1]}
            `
          }else{
            return `
              ${formatStatus(params[0].value[3])}: ${formatTime((params[0].value[2]-params[0].value[1])/1000)}<br />
            `
          }
        }
      },
      dataZoom: [
        {
          type: "inside",
          preventDefaultMouseMove: false,
          xAxisIndex: [0, 1],
          yAxisIndex: null,
          filterMode: 'weakFilter',
        },
      ],
      legend: {
        data:['行驶','驻车','泵送','转场','待料','行驶里程','泵送方量','油耗'],
        top: 10
      },
      series: [{ 
        name: '行驶里程',
        type: 'line',
        data: this.mileData,
        showSymbol: false,
        smooth: 'average',
        itemStyle: {
          color: getChartColor['行驶里程'],
        },
        yAxisIndex: 0,
        xAxisIndex: 0,
      },{ 
        name: '泵送方量',
        type: 'line',
        data: this.quantityData,
        showSymbol: false,
        smooth: 'average',
        itemStyle: {
          color: getChartColor['泵送方量'],
        },
        yAxisIndex: 1,
        xAxisIndex: 0,
        label: {
          show: true,
          formatter: '{b}'
        },
      },{ 
        name: '油耗',
        type: 'line',
        data: this.oilData,
        showSymbol: false,
        smooth: 'average',
        itemStyle: {
          color: getChartColor['油耗'],
        },
        yAxisIndex: 1,
        xAxisIndex: 0,
      },{
        value: '状态',
        type: 'custom',
        renderItem: renderItem,
        encode: {
            x: [1, 2],
            y: 0
        },
        data: this.seriesData,
        yAxisIndex: 2,
        xAxisIndex: 1,
      },{
          name: '行驶',
          type: 'custom',
          itemStyle: {
            normal: {
              color: getChartColor['行驶']
            }
          },
      },{
          name: '驻车',
          type: 'custom',
          itemStyle: {
            normal: {
              color: getChartColor['驻车']
            }
          },
      },{
          name: '泵送',
          type: 'custom',
          itemStyle: {
            normal: {
              color: getChartColor['泵送']
            }
          },
      },{
          name: '转场',
          type: 'custom',
          itemStyle: {
            normal: {
              color: getChartColor['转场']
            }
          },
      },{
          name: '待料',
          type: 'custom',
          itemStyle: {
            normal: {
              color: getChartColor['待料']
            }
          },
      },{ 
        name: '时间区间',
        type: 'line',
        data: anchorLine,
        itemStyle:{normal:{opacity:0}},
        lineStyle:{normal:{opacity:0}},
        yAxisIndex: 0,
        xAxisIndex: 0,
      },{ 
        name: '时间区间',
        type: 'line',
        data: anchorLine,
        showSymbol: false,
        itemStyle:{normal:{opacity:0}},
        lineStyle:{normal:{opacity:0}},
        yAxisIndex: 2,
        xAxisIndex: 1,
      }]
    })
  }

  // 设备工作画像精确到日
  dayChart = async (data) => {
    this.chart = echarts.init(document.getElementById('chart'));
    let timeData = []; // 日期
    let oilData = []; // 油耗
    let quantityData = []; // 泵送
    let driveTime = []; // 行驶
    let parkTime = []; // 驻车
    let pumpTime = []; // 泵送
    let switchTime = []; // 转场
    let awaitTime = []; // 待料
    data.dataList.map(item=>{
      timeData.push(item.time);
      oilData.push(item.oil.toFixed(2));
      quantityData.push(item.quantity.toFixed(2));
      driveTime.push((item.driveTime/3600).toFixed(2));
      parkTime.push((item.parkTime/3600).toFixed(2));
      pumpTime.push((item.pumpTime/3600).toFixed(2));
      switchTime.push((item.switchTime/3600).toFixed(2));
      awaitTime.push((item.awaitTime/3600).toFixed(2));
    })
    this.chart.setOption({
      grid: {
        top: 90,
        left: 40,
        right: 40,
      },
      tooltip : {
        trigger: 'axis',
        triggerOn: 'click',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: (params) => {
          return `
          ${params[0].axisValue.slice(0,4)}年${params[0].axisValue.slice(4,6)}月${params[0].axisValue.slice(-2)}日<br />
          泵送方量(方)：${params[0].value}<br />
          油耗(升)：${params[1].value}<br />
          行驶(小时)：${params[2].value}<br />
          驻车(小时)：${params[3].value}<br />
          泵送(小时)：${params[4].value}<br />
          转场(小时)：${params[5].value}<br />
          待料(小时)：${params[6].value}<br />
          `
        }
      },
      xAxis: {
        type: 'category',
        data: timeData,
        nameTextStyle: {
          fontSize: 16,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          formatter: (time)=>{
            return  `${time.slice(-2)}日`
          }
        },
      },
      yAxis: [
        {
          name: '小时',
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          name: '方｜L',
          type: 'value',
          splitLine: {
              show: false
          },
          axisLabel: {
            formatter: (p)=>{
              return p>=1000?(p/1000).toFixed(1)+'k':p
            }
          }
        },
      ],
      dataZoom: [
        {
          type:"inside",
          preventDefaultMouseMove: false,
          start: 20,
          end: 80,
        }
      ],
      legend: {
        data:['行驶','驻车','泵送','转场','待料','泵送方量','油耗']
      },
      series: [
        { 
          name: '泵送方量',
          type: 'line',
          data: quantityData,
          yAxisIndex: 1,
          itemStyle: {
            color: getChartColor['泵送方量'],
          },
        },
        {
          name: '油耗',
          type: 'line',
          data: oilData,
          yAxisIndex: 1,
          itemStyle: {
              color: getChartColor['油耗']
          }
        },
        {
          name: '行驶',
          type: 'bar',
          data: driveTime,
          itemStyle: {
            normal: {
              color: getChartColor['行驶']
            }
          },
          stack: '耗时',
          yAxisIndex: 0,
        },
        {
          name: '驻车',
          type: 'bar',
          data: parkTime,
          itemStyle: {
            normal: {
              color: getChartColor['驻车']
            }
          },
          stack: '耗时',
          yAxisIndex: 0,
        },
        {
          name: '泵送',
          type: 'bar',
          data: pumpTime,
          itemStyle: {
            normal: {
              color: getChartColor['泵送']
            }
          },
          stack: '耗时',
          yAxisIndex: 0,
        },
        {
          name: '转场',
          type: 'bar',
          data: switchTime,
          itemStyle: {
            normal: {
              color: getChartColor['转场']
            }
          },
          stack: '耗时',
          yAxisIndex: 0,
        },
        {
          name: '待料',
          type: 'bar',
          data: awaitTime,
          itemStyle: {
            normal: {
              color: getChartColor['待料']
            }
          },
          stack: '耗时',
          yAxisIndex: 0,
          barMaxWidth: 20,
        },
      ]
    })
  }

  // 设备工作画像精确到月
  monthChart = (data) => {
    this.chart = echarts.init(document.getElementById('chart'));
    let { dataList } = data;
    var dataObj = {};
    dataList.map((item)=>{
      let time = `${item.time}`.slice(0,-2)
      if(dataObj[time]){
        dataObj[time].quantity += item.quantity;
        dataObj[time].oil += item.oil;
        dataObj[time].mileage += item.mileage;
        dataObj[time].driveTime += item.driveTime;
        dataObj[time].parkTime += item.parkTime;
        dataObj[time].pumpTime += item.pumpTime;
        dataObj[time].switchTime += item.switchTime;
        dataObj[time].awaitTime += item.awaitTime;
      }else{
        dataObj[time]=item
      }
    })
    var dataKeys = Object.keys(dataObj)
    let timeData = dataKeys; // 日期
    let oilData = []; // 油耗
    let quantityData = []; // 泵送
    let driveTime = []; // 行驶
    let parkTime = []; // 驻车
    let pumpTime = []; // 泵送
    let switchTime = []; // 转场
    let awaitTime = []; // 待料
    dataKeys.map(item=>{
      oilData.push(dataObj[item].oil.toFixed(2));
      quantityData.push(dataObj[item].quantity.toFixed(2));
      driveTime.push((dataObj[item].driveTime/3600).toFixed(2));
      parkTime.push((dataObj[item].parkTime/3600).toFixed(2));
      pumpTime.push((dataObj[item].pumpTime/3600).toFixed(2));
      switchTime.push((dataObj[item].switchTime/3600).toFixed(2));
      awaitTime.push((dataObj[item].awaitTime/3600).toFixed(2));
    })
    this.chart.setOption({
      grid: {
        top: 90,
        left: 40,
        right: 40,
      },
      tooltip : {
        trigger: 'axis',
        triggerOn: 'click',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: (params) => {
          return `
          ${params[0].axisValue.slice(0,4)}年${params[0].axisValue.slice(4)}月<br />
          泵送方量(方)：${params[0].value}<br />
          油耗(升)：${params[1].value}<br />
          行驶(小时)：${params[2].value}<br />
          驻车(小时)：${params[3].value}<br />
          泵送(小时)：${params[4].value}<br />
          转场(小时)：${params[5].value}<br />
          待料(小时)：${params[6].value}<br />
          `
        }
      },
      xAxis: {
        type: 'category',
        data: timeData,
        nameTextStyle: {
          fontSize: 16,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          formatter: (time)=>{
            return  `${time.slice(-2)}月`
          }
        },
      },
      yAxis: [
        {
          type: 'value',
          name: '小时',
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '方｜L',
          splitLine: {
              show: false
          },
          axisLabel: {
            formatter: (p)=>{
              return p>=1000?(p/1000).toFixed(1)+'k':p
            }
          }
        },
          
      ],
      dataZoom: [
        {
          type:"inside",
          preventDefaultMouseMove: false
        }
      ],
      legend: {
        data:['行驶','驻车','泵送','转场','待料','泵送方量','油耗']
      },
      series: [
        { 
          name: '泵送方量',
          type: 'line',
          data: quantityData,
          yAxisIndex: 1,
          itemStyle: {
            color: getChartColor['泵送方量']
          },
        },
        {
          name: '油耗',
          type: 'line',
          data: oilData,
          yAxisIndex: 1,
          itemStyle: {
              color: getChartColor['油耗']
          }
        },
        {
          name: '行驶',
          type: 'bar',
          data: driveTime,
          itemStyle: {
            normal: {
              color: getChartColor['行驶']
            }
          },
          stack: '耗时',
          yAxisIndex: 0,
        },
        {
          name: '驻车',
          type: 'bar',
          data: parkTime,
          itemStyle: {
            normal: {
              color: getChartColor['驻车']
            }
          },
          stack: '耗时',
          yAxisIndex: 0,
        },
        {
          name: '泵送',
          type: 'bar',
          data: pumpTime,
          itemStyle: {
            normal: {
              color: getChartColor['泵送']
            }
          },
          stack: '耗时',
          yAxisIndex: 0,
        },
        {
          name: '转场',
          type: 'bar',
          data: switchTime,
          itemStyle: {
            normal: {
              color: getChartColor['转场']
            }
          },
          stack: '耗时',
          yAxisIndex: 0,
        },
        {
          name: '待料',
          type: 'bar',
          data: awaitTime,
          itemStyle: {
            normal: {
              color: getChartColor['待料']
            }
          },
          stack: '耗时',
          yAxisIndex: 0,
          barWidth: 12,
        },
      ]
    })
  }

  render(){;
    const { statistics, pieData } = this.state;
    return (
      <div>
        <div className={styles.header}>
          {this.source=='selfpage' ? 
          <div onClick={()=>{ this.props.history.goBack() }} className={styles.back}>
            <img src={require('../assets/img/back.png')} />
          </div>
          : <a href="javascript:" class="router_back-btn"></a>
          }
          <div >
            <div className={styles.header_title}>{this.equipCode}</div>
            <div className={styles.header_time}>{this.times.beginDate===this.times.endDate ? this.times.beginDate : `${this.times.beginDate} / ${this.times.endDate}`}</div>
          </div>
        </div>
        <DatePicker ref={el=>{ this.datePicker = el }} equipCode={this.equipCode} defaultTime={this.times} handleChangeTab={this.handleChangeTab} />
        <Statistics nolink times={this.times} statistics={statistics}  />
        <div ref={el=>{ this.devportrait = el }} style={{ display: 'none' }} className={styles.section}>
          <div className={styles.section_title}>设备工作画像</div>
          {(this.times.beginDate == this.times.endDate) && 
          <img onClick={()=>{ 
            window.ReactNativeWebView ? location.href=`devportrait?equipCode=${this.equipCode}&source=${this.source}&token=${this.token}&worktime=${JSON.stringify(this.times)}` 
            : this.props.history.push(`devportrait?equipCode=${this.equipCode}&source=${this.source}&token=${this.token}&worktime=${JSON.stringify(this.times)}`)
            }} 
            className={styles.enlarge} src={require('../assets/img/equip/enlarge.png')} />}
          <div id="chart" className={styles.sbhx}></div>
        </div>
        <div ref={el=>{ this.nodata = el }} className={styles.section}>
          <div className={styles.section_title}>设备工作画像</div>
          <img className={styles.nodata_img} src={require('../assets/img/nodata.png')} />
          <div className={styles.nodata_text}>没有数据</div>
        </div>
        <div className={styles.section}>
          <div className={styles.section_title}>时间油耗分布图</div>
          <div id="pie" className={styles.chart}></div>
          <div className={styles.pie_total}>
            总油耗：{this.totalOil}升 &nbsp;
            总耗时：{this.totalTime}小时
          </div>
          <div className={styles.pie_legend}>
            <div className={styles.pie_row}>
              <div className={styles.row_item}>
                <div className={styles.item_color} style={{ backgroundColor: getChartColor['行驶']}}></div>
                <div className={styles.item_title}>行驶</div>
              </div>
              <div className={styles.row_item}>
                <div className={styles.item_color} style={{ backgroundColor: getChartColor['驻车']}}></div>
                <div className={styles.item_title}>驻车</div>
              </div>
              <div className={styles.row_item}>
                <div className={styles.item_color} style={{ backgroundColor: getChartColor['泵送']}}></div>
                <div className={styles.item_title}>泵送</div>
              </div>
              <div className={styles.row_item}>
                <div className={styles.item_color} style={{ backgroundColor: getChartColor['转场']}}></div>
                <div className={styles.item_title}>转场</div>
              </div>
              <div className={styles.row_item}>
                <div className={styles.item_color} style={{ backgroundColor: getChartColor['待料']}}></div>
                <div className={styles.item_title}>待料</div>
              </div>
            </div>
            <div className={styles.pie_row}>
              <div className={styles.row_item}>
                <div className={styles.item_value}>{pieData.oil ? `${pieData.oil.driveOil}L`: 0}</div>
              </div>
              <div className={styles.row_item}>
                <div className={styles.item_value}>{pieData.oil ? `${pieData.oil.parkOil}L` : 0}</div>
              </div>
              <div className={styles.row_item}>
                <div className={styles.item_value}>{pieData.oil ? `${pieData.oil.pumpOil}L` : 0}</div>
              </div>
              <div className={styles.row_item}>
                <div className={styles.item_value}>{pieData.oil ? `${pieData.oil.switchOil}L` : 0}</div>
              </div>
              <div className={styles.row_item}>
                <div className={styles.item_value}>{pieData.oil ? `${pieData.oil.awaitOil}L` : 0}</div>
              </div>
            </div>
            <div className={styles.pie_row}>
              <div className={styles.row_item}>
                <div className={styles.item_value}>{pieData.time ? `${(pieData.time.driveTime/3600).toFixed(2)}H`: 0 }</div>
              </div>
              <div className={styles.row_item}>
                <div className={styles.item_value}>{pieData.time ? `${(pieData.time.parkTime/3600).toFixed(2)}H`: 0 } </div>
              </div>
              <div className={styles.row_item}>
                <div className={styles.item_value}>{pieData.time ? `${(pieData.time.pumpTime/3600).toFixed(2)}H`: 0 }</div>
              </div>
              <div className={styles.row_item}>
                <div className={styles.item_value}>{pieData.time ? `${(pieData.time.switchTime/3600).toFixed(2)}H`: 0 }</div>
              </div>
              <div className={styles.row_item}>
                <div className={styles.item_value}>{pieData.time ? `${(pieData.time.awaitTime/3600).toFixed(2)}H`: 0 }</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
export default withRouter(CarDetail)